#chatsHeader {
	height: calc(2rem - 2px);
	background-color: #dcdcdc;
	text-align: center;
	border-block: 1px solid #cccccc;

	div {
		display: inline-block;
		height: 100%;
		line-height: calc(2rem - 2px);
	}

	#chatsTitle {
		font-size: 1.25rem;
		font-weight: bold;
		line-height: 1.625rem;
	}

	#controlPanel {
		float: right;

		.controlButton {
			width: 2rem;
			cursor: pointer;
			transition: 200ms;

			&:hover {
				background-color: #8d8d8d54;
			}

			&:active {
				background-color: #6e6e6e54;
			}
		}
	}
}

#chatsContainer {
	width: 100%;
	height: calc(100% - 2rem);
	display: flex;
	position: relative;

	#chatsFriendsPanel {
		height: 100%;
		width: calc(13rem - 1px);
		border-right: 1px solid #cccccc;
		background-color: #fcfcfc;
		overflow-y: overlay;
		display: flex;
		flex-direction: column-reverse;
		justify-content: flex-end;

		&::-webkit-scrollbar {
			width: 0.2rem; // 纵向滚动条宽度
		}

		&::-webkit-scrollbar-thumb {
			background-color: #a8a8a8;
			border-radius: 0%;
		}

		&::-webkit-scrollbar-track {
			background-color: rgba($color: #000000, $alpha: 0);
		}
	}
}
